import React from "react";
import { Badge, TabBar } from 'antd-mobile'
import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'

const tabs = [
    {
        key: 'home',
        title: '首页',
        icon: <AppOutline />,
        badge: Badge.dot,
    },
    {
        key: 'todo',
        title: '我的待办',
        icon: <UnorderedListOutline />,
        badge: '5',
    },
    {
        key: 'message',
        title: '我的消息',
        icon: (active) =>
            active ? <MessageFill /> : <MessageOutline />,
        badge: '99+',
    },
    {
        key: 'personalCenter',
        title: '个人中心',
        icon: <UserOutline />,
    },
]

export default class Shouye extends React.Component {
    render() {
        return <TabBar>
            {tabs.map(item => (
                <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            ))}
        </TabBar>
    }
}